<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>写文章</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="/static/img/logo.jpg">
    <!--    layui的组件和样式-->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>

    <link rel="stylesheet" th:href="@{/static/lib/editormd/css/editormd.min.css}"/>
    <script th:src="@{/static/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/static/lib/editormd/editormd.min.js}"></script>


</head>
<body style="background-image: linear-gradient(500rad,#a8edea,#fed6e3)">
<div>
    <ul class="layui-nav">
        <li class="layui-nav-item"><a th:href="@{/index}">首页</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">文章分类</a>
        </li>
        <li class="layui-nav-item"><a href="">标签</a></li>
        <li class="layui-nav-item"><a href="">文章归档</a></li>
        <li class="layui-nav-item"><a href="">日志</a></li>
        <li class="layui-nav-item"><a href="">留言板</a></li>
        <li class="layui-nav-item layui-col-sm-offset2"><a href="writeArticle.html" class="layui-icon layui-icon-edit">&nbsp;写文章</a>
        </li>
        <li class="layui-btn layui-btn-primary layui-btn-md layui-btn-radius layui-bg-orange"
            style="margin: 5px -86px -10px 20px" id="saveBtn" data-method="setTop">
            发布
        </li>
        <li class="layui-nav-item layui-col-sm-offset3"><a href="">登录</a></li>
        <li class="layui-nav-item "><a href="">注册</a></li>
    </ul>
</div>

<div id="test-editormd" style="margin-top: 10px">
                <textarea class="editormd-html-textarea" name="text" id="editormdData" style="display:none;">
# [TOC] 开始愉快的畅写你的博客吧！
</textarea>
</div>

</body>
<script type="text/javascript">

    $(function () {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 758,
            syncScrolling: "single",
            path: "static/lib/editormd/lib/",
            saveHTMLToTextarea: true,
            emoji: true,//emoji表情，默认关闭
            taskList: true,
            tocm: true, // Using [TOCM]
            tex: true,// 开启科学公式TeX语言支持，默认关闭

            flowChart: true,//开启流程图支持，默认关闭
            sequenceDiagram: true,//开启时序/序列图支持，默认关闭,

            dialogLockScreen: false,//设置弹出层对话框不锁屏，全局通用，默认为true
            dialogShowMask: false,//设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            dialogDraggable: false,//设置弹出层对话框不可拖动，全局通用，默认为true
            dialogMaskOpacity: 0.4, //设置透明遮罩层的透明度，全局通用，默认值为0.1
            dialogMaskBgColor: "#000",//设置透明遮罩层的背景颜色，全局通用，默认为#fff

            codeFold: true,

            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/smart-api/upload/editormdPic/",
        });
    });

    layui.use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        //触发事件
        var active = {
            setTop: function () {
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    ,
                    title: '文档信息'
                    ,
                    area: ['500px', '400px']
                    ,
                    shade: 0
                    ,
                    id: 'jump'
                    ,
                    maxmin: true
                    ,
                    offset: [ //为了演示，随机坐标
                        $(window).height() * 0.2
                        , $(window).width() * 0.4
                    ]
                    ,
                    content: "/submit"
                    ,
                    btn: ['确认发布', '再改一改'] //只是为了演示
                    ,
                    yes: function (index, layero) {
                        var data = $("#editormdData").val();
                        $(layero).find('iframe').contents().find("#myBtn").click();
                        $(layero).find('iframe').contents().find("#myBtn").on('click', function () {
                            if (json_data != null) {
                                // console.log(json_data);
                                $.ajax({
                                    type: 'post',
                                    url: 'http://localhost:8080/editormdPic',
                                    // headers:{
                                    //     "Access-Control-Allow-Origin":"*"
                                    // },
                                    data: {
                                        'data': data,
                                        'formData': json_data
                                    },
                                    success: function (data) {
                                        console.log(data);
                                    }
                                });
                                layer.closeAll();
                            } else {
                                console.log("json_data为空")
                            }
                        });
                    }
                    ,
                    btn2: function () {
                        layer.closeAll();
                    }
                })
            }
        }
        $('#saveBtn').on('click', function () {

            active.setTop();
        });
    });
    var json_data;
    window.addEventListener('message', function (e) {
            json_data = e.data;
        }
        , false);

</script>
</html>

<!--        /*上传图片成功后可以做一些自己的处理*/
                    onload: function () {
                        //console.log('onload', this);
                        //this.fullscreen();
                        //this.unwatch();
                        //this.watch().fullscreen();
                        //this.width("100%");
                        //this.height(480);
                        //this.resize("100%", 640);
                    },

                    /**设置主题颜色*/
                    editorTheme: "pastel-on-dark",
                    theme: "gray",
                    previewTheme: "dark"-->